<template>
  <div class="comment">

    <!-- {{ commentdata[0] }} -->
    <el-input
      type="textarea"
      placeholder="请输入内容"
      v-model="textarea"
      maxlength="140"
      show-word-limit
    >
    </el-input>
    <div class="btn-box">
      <div><span>@</span> <span>#</span></div>
      <el-button round>评论</el-button>
    </div>
    <div v-for="(time, index) in hot" :key="index">
      <h6>精彩评论</h6>
      <div class="goodcomments">
        <!-- 这里的头像可以绑定:src="circleUrl" 达到切换头像-->
        <div class="block"><el-avatar :size="40"></el-avatar></div>
        <div class="box">
          <div><span class="span1">username:</span>内容</div>
          <div class="btncomments">
            <span>18:17</span>
            <ul>
              <li>举报 <span>|</span></li>
              <li><img src="../assets/赞.png" width="18" /><span>|</span></li>
              <li><img src="../assets/分享.png" width="18" /> <span>|</span></li>
              <li><img src="../assets/评论.png" width="18" /> <span>|</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div>
      <h6>最新评论 ({{ total }})</h6>
      <div
        class="upcomments2"
        v-for="(item, index) in commmetn"
        :key="index"
        @mousemove="jb(index)"
      >
        <!-- 这里的头像可以绑定:src="circleUrl" 达到切换头像-->
        <div class="block">
          <el-avatar :size="40" :src="item.user.avatarUrl"></el-avatar>
        </div>
        <div class="box">
          <div>
            <span class="span1">{{ item.user.nickname }}:</span>{{ item.content }}
          </div>
          <div class="reply" v-if="item.beReplied.length>0"><span>@{{item.beReplied[0].user.nickname}}</span>:{{item.beReplied[0].content}}</div>
          <div class="btncomments">
            <span>{{
              new Date(item.time).getHours() + ":" + new Date(item.time).getMinutes()
            }}</span>
            <ul>
              <li v-show="inform==index?true:false">举报 <span>|</span></li>
              <li>
                <img src="../assets/赞.png" width="18" />
                <span v-if="commentdata[index]">{{
                  commentdata[index].likedCount
                }}</span
                ><span>|</span>
              </li>
              <li><img src="../assets/分享.png" width="18" /> <span>|</span></li>
              <li><img src="../assets/评论.png" width="18" /></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Api from '../lib/api'
import { mapState } from "vuex";
export default {
  name: "comment",
  data() {
    return {
      textarea: "请输入评论内容",
      commentdata: [],
      total: "0",
      hot: "", //热门评论
      offs: true,
      inform:0
    };
  },
  created() {
    let _this=this
      // 评论
    Api.comment(_this)
    // 评论
    // this.$axios
    //   .get("comment/playlist", {
    //     params: {
    //       id: this.$route.query.id,
    //     },
    //   })
    //   .then((res) => {
    //     this.total = res.data.total;
    //     this.commentdata = res.data.comments;
    //     this.$store.commit("uptotal", res.data.total);
    //     this.$store.commit("upcommmetn", res.data.comments);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   })
  },
  computed: {
    ...mapState(["commmetn"]),
  },
  methods: {
    jb(index) {
      if (!this.offs) {
        return;
      }
      this.offs = false;
      setTimeout(() => {
        this.offs = true;
        this.inform=index
      },100);
    },
  },
};
</script>

<style lang="scss">
.comment {
  textarea {
    border: 0;
    border-radius: 5px;
    width: 100%;
    height: 100px;
    padding: 10px;
    resize: none;
    border: 1px solid #8989;
  }
  .btn-box {
    span {
      cursor: pointer;
    }
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }
  .goodcomments,
  .upcomments2 {
    display: flex;
    .box {
      font-size: 14px;
      padding: 0px 20px;
      width: 100%;
      .span1 {
        cursor: pointer;
        color: royalblue;
        margin-right: 5px;
      }
    }
    .btncomments {
      display: flex;
      justify-content: space-between;
      ul {
        display: flex;
        list-style: none;
        li {
          cursor: pointer;
          display: flex;
          align-items: center;
          // width: 30px;
          margin-left: 10px;
          span {
            color: #8989;
            font-weight: 500;
            font-size: 14px;
            margin-left: 5px;
          }
          // margin-left:10px ;
        }
      }
    }
     .reply{
       display: flex;
        align-items: center;
        width: 100%;
        height: 35px;
        background: rgba(136, 153, 136, 0.2);
        border-radius: 5px;
        padding-left: 5px;
        span{
          color: rgb(0, 140, 255);
          cursor: pointer;
        }
      }
  }
  .upcomments2 {
    border-bottom: 1px solid #dcdfe6;
    margin: 15px 0px;
  }
}
</style>
